<template>
  <section>
    <div class="left">
      <div class="top">
        <div class="kkModule">
          <Map ref="map"></Map>
          <div class="kkModule-sub"></div>
        </div>
      </div>
      <div class="bottom">
        <div class="kkModule">
          <EvtCount :data="evtCountData" ref="evtCountData"></EvtCount>
          <div class="kkModule-sub"></div>
        </div>
      </div>
    </div>

    <div class="mid">
      <div class="top">
        <div class="kkModule">
          <CameraInfo :data="cameraInfoData"></CameraInfo>
          <div class="kkModule-sub"></div>
        </div>
      </div>
      <div class="mid">
        <div class="kkModule">
          <VisibilityInfo :data="visibilityInfoData"></VisibilityInfo>
          <div class="kkModule-sub"></div>
        </div>
      </div>
      <div class="bottom">
        <div class="kkModule">
          <LiveEvt :data="liveEvtData" ref="liveEvt"></LiveEvt>
          <div class="kkModule-sub"></div>
        </div>
      </div>

    </div>

    <div class="right">
      <div class="top">
        <div class="kkModule">
          <CenterEvtCount :data="centerEvtCountData"></CenterEvtCount>
          <div class="kkModule-sub"></div>
        </div>
      </div>
      <div class="bottom">
        <div class="kkModule">
          <CenterRoadCount :data="centerRoadCountData"></CenterRoadCount>
          <div class="kkModule-sub"></div>
        </div>
      </div>
      <div class="bottom">
        <div class="kkModule">
          <RoadInfo :data="roadInfoData"></RoadInfo>
          <div class="kkModule-sub"></div>
        </div>
      </div>
      <!-- <div class="bottom">
        <div class="kkModule">
          <CenterCarsInfo :data="centerCarsInfo"></CenterCarsInfo>
          <div class="kkModule-sub"></div>
        </div>
      </div> -->
    </div>
  </section>
</template>

<script>
  import CameraInfo from 'comp/index/CameraInfo';
  import OutsideDev from 'comp/index/OutsideDev';
  import EvtCount from "comp/index/EvtCount";
  import RoadInfo from "comp/index/RoadInfo";
  import CenterCarsInfo from "comp/index/CenterCarsInfo";
  import CenterRoadCount from "comp/index/CenterRoadCount";
  import CenterEvtCount from "comp/index/CenterEvtCount";
  import VisibilityInfo from "comp/index/VisibilityInfo";
  import LiveEvt from "comp/index/LiveEvt";
  import Map from "comp/common/Map";

  export default {
    name: "Index",
    components: {
      CameraInfo,
      OutsideDev,
      EvtCount,
      RoadInfo,
      CenterCarsInfo,
      CenterRoadCount,
      CenterEvtCount,
      VisibilityInfo,
      LiveEvt,
      Map
    },
    data() {
      return {
        timer: null,
        cameraInfoData: [],
        outsideDevData: {},
        evtCountData: [],
        roadInfoData: [],
        centerCarsInfo: [],
        centerRoadCountData: [],
        centerEvtCountData: [],
        visibilityInfoData: [],
        liveEvtData: [],
        liveEvtIndex: null
      }
    },
    mounted() {
      this.getIntervalData();
      this.getCarsInfo();
      this.timer = setInterval(this.getIntervalData, WebCfg.api.timer * 1000);
    },
    methods: {
      getIntervalData() {
        this.$server('index.timedData').then(data => {
          this.$kkui.loading_deepBlue.hide();

          this.cameraInfoData = data['cameraGkList'];
          this.outsideDevData = data['cwss'];
          this.evtCountData = data['eventDayList'];
          this.roadInfoData = data['roadList'];
          this.centerRoadCountData = data['centerList'];
          this.centerEvtCountData = data['centerDayList'];
          this.visibilityInfoData = data['wmList'];
        });

        this.getLiveEvtData();
      },

      getCarsInfo() {
        this.$server('patrol.cars.list', {}).then(data => {
          this.centerCarsInfo = data;
        })
      },
      getLiveEvtData() {
        this.$server('monitor.liveEvt', {maxId: this.liveEvtIndex}).then(data => {
          this.liveEvtData = data;
          if (data['newList'].length > 0) {
            this.liveEvtIndex = data['newList'].reduce((p, n) => Math.max(p, n.id), 0);
          }
        })
      },
    },
    beforeDestroy() {
      clearInterval(this.timer);
      this.timer = null;
    }
  }
</script>

<style scoped lang="scss">
  @import "~css/index.scss";
</style>
